//点击优化
@mixin click_helper(){
    content:'';
    position: absolute;
    top:-4px;
    left:-4px;
    right:-4px;
    bottom:-4px;
}

//小图标
@mixin icon($width,$height:$width){
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100%;
    width:$width;
    height:$height;
}

/* flex 相关 */
@mixin flex{
    display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -webkit-flex; /* 新版本语法: Chrome 21+ */
    display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
}

@mixin justify($new,$old){
    -webkit-box-pack: $old;
    -webkit-justify-content: $new;
    justify-content: $new;
}

@mixin align($new,$old){
    -webkit-box-align: $old;
    -webkit-align-items: $new;
    align-items: $new;
}

/* flex 相关 ------ end */

//popup组件的关闭按钮的样式
@mixin popup_close(){
    position:absolute;
    top: -$pt40;
    right: $pt2;
    img{
        width: 30px;
    }
}

@mixin popup_btn(){
    text-align: center;
    margin:$pt40 auto $pt20;
    .button{
        width: 4rem;
    }
}

@mixin popup_body{
    background: $white;
    padding: $pt20;
    border-radius: $pt10;
}

//一些页面顶部空留10像素左右大小的空间
@mixin spareSpaceAtTop{
    padding-top: $pt10;
}

//获取验证码的样式
@mixin getCode{
    position: absolute;
    top:50%;
    right:$pt20;
    padding: 10px;
    border-radius: 16px;
    width: 2.6rem;
    text-align: center;
    height:32px;
    line-height: $fontNs;
    margin-top: - 16px;
    background: $balanced;
    font-size: $fontNs;
    color: $white; 
    &.waiting{
        background: $grayLl;
    }
}

//同意协议样式
@mixin agreement{
    margin: $pt10 0;
    color: $grayN;
    input[type="checkbox"]{
        position:relative;
        // top:2px;
        vertical-align: middle;
    }
    a{
        color:$energized;
        text-decoration: none;
    }
}

//个人信息认证页面几个底部弹出框的容器样式
@mixin boxUpStyle{
    transition: all 0.2s ease-in-out;
    background:$whiteD;
    width:100%;
    position: absolute;
    z-index:2;
    bottom:0;
}

//输入框样式
@mixin formInput{
    background: $white;
    .inputLine{
        padding: 0 $pt20;
        border-bottom: 1px solid $borderColorL;        
        @include inputLine;
    }
}

//inputLine样式
@mixin inputLine{
    position: relative;
    input{
        padding-left: $pt6;
        background: none;
        color: $grayLl;
        font-size: $fontNs;
        display: block;
        width:100%;
        height: $pt50;
    }
}

//inputCenter样式
@mixin inputCenter{
    background: $white;
    position: relative;
    input{
        width: 100%;
        height: $pt50;
        text-align: center;
    }
}

//inputLeft样式
@mixin inputLeft{
    background: $white;
    position: relative;
    input{
        padding-left: $pt6;
        width: 100%;
        height: $pt50;
        text-align: left;
    }
}

@mixin empty{
    margin-top: 5.6rem;
    img{
        width: 2.4rem;
        display: block;
        margin: 0 auto;
    }
}